<div #profileElement class="po-toolbar-profile po-clickable" (click)="popup.toggle()">
  <po-avatar p-size="xs" [p-src]="profileAvatar"></po-avatar>
</div>

<po-popup #popup p-size="medium" [p-actions]="profileActions" [p-target]="profileElement">
  @if (profile?.title) {
    <div p-popup-header-template class="po-toolbar-profile-item-header">
      <po-avatar class="po-toolbar-profile-item-avatar" p-size="sm" [p-src]="profileAvatar"> </po-avatar>
      <div>
        <div class="po-toolbar-profile-item-header-title">
          {{ profile.title }}
        </div>
        @if (profile.subtitle) {
          <div class="po-toolbar-profile-item-header-subtitle">
            {{ profile.subtitle }}
          </div>
        }
      </div>
    </div>
  }
</po-popup>
